import React, { Component, Fragment } from 'react';
import { connect } from 'dva';
import { Spin } from 'antd';
import moment from 'moment';
import EditPage from '@/components/EditPage';
import DetailPage from '@/components/DetailPage';
import FileReader from '@/components/FileReader';

import { formItemFragement, queryDict, queryPerson, formatPrice } from '@/utils/common';
import { allDictList, billStateOnlyReadList } from '@/utils/constans';
import {
  renderTableAdSelect,
  incidentalStatusList,
  allUrl,
  allDispatchType,
  selectIncidentalDetailAndInfo,
} from './utils';

@connect(({ incidental, loading, component }) => ({
  incidentalDetail: incidental.incidentalDetail,
  dictObject: component.dictObject,
  loading: loading.effects[allDispatchType.detail],
}))
export default class IncidentalDetail extends Component {
  state = {};
  componentWillMount() {
    // 查询字典项
    const allDict = [allDictList.otherFeeType, allDictList.currencyType, allDictList.costSubjects];
    queryDict({ props: this.props, allDict });
  }

  componentDidMount() {
    const { detailId } = this.props;
    const id = detailId;
    if (!id) return;
    selectIncidentalDetailAndInfo({
      type: allDispatchType.detail,
      payload: { id },
      props: this.props,
      callback: data => {
        // const { relationObjId, receiverType } = data;
        // if (relationObjId) return;
        // const url = receiverType === 'EMPLOYEE' ? allUrl.userList : allUrl.supplierList;
        // queryPerson({ data: relationObjId, props: props, url });
      },
    });
  }

  handleStateChange = (options = []) => {
    options.map(item => {
      this.setState(item);
    });
  };

  render() {
    const { loading, incidentalDetail, detailId } = this.props;
    const {} = this.state;
    const detail = incidentalDetail[detailId] || {};
    
    const editPageParams = {
      panelValue: [{ key: '基础信息' }],
    };
    console.log('detail.fileList',detail.fileList)
    const formItem = [
      [
        <DetailPage label="单号" value={detail.miscellaneousNo} />,
        <DetailPage
          label="状态"
          value={renderTableAdSelect({
            props: this.props,
            value: detail.billStatus || detail.status,
            data: detail.billStatus ? billStateOnlyReadList : incidentalStatusList,
          })}
        />,
      ],
      [
        <DetailPage label="车次号" value={detail.trainName} />,
        <DetailPage
          label="费用类型"
          value={renderTableAdSelect({
            props: this.props,
            value: detail.type,
            key: allDictList.otherFeeType,
          })}
        />,
      ],
      [
        <DetailPage label="所属公司" value={detail.ownCompanyName} />,
        <DetailPage label="付款人" value={detail.relationObj} />,
      ],
      [
        <DetailPage
          label="付款日期"
          value={detail.happenTime ? moment(detail.happenTime).format('YYYY-MM-DD') : ''}
        />,
        <DetailPage label="金额" value={formatPrice(detail.fee)} />,
      ],
      [
        <DetailPage
          label="币种"
          value={renderTableAdSelect({
            props: this.props,
            value: detail.currency,
            key: allDictList.currencyType,
          })}
        />,
        <DetailPage
          label="科目"
          value={renderTableAdSelect({
            props: this.props,
            value: detail.costType,
            key: allDictList.costSubjects,
          })}
        />,
      ],
      [<DetailPage label="结算周期" value={detail.settlementDate} />],
      [<DetailPage label="备注" value={detail.remark} />],
      [
        <DetailPage
          label="附件"
          value={
            <FileReader
              urlType="tms"
              value={detail.fileList || []}
              showUploadList={{ showPreviewIcon: true, showRemoveIcon: false }}
              showUpload={false}
            />
          }
        />,
      ],
    ];

    return (
      <EditPage {...editPageParams}>
        <Spin spinning={loading}>{formItemFragement(formItem)}</Spin>
      </EditPage>
    );
  }
}
